<template>
	<view class="p-t-20">
<!--		<view class="p-l-24 p-r-24">-->
<!--			<view class="back-color-c radius-16 p-t-22 p-l-40 p-r-38 p-b-20">-->
<!--				<view class="font-28 color-a">提现到账账户</view>-->
<!--				<view class="flex-between m-t-42">-->
<!--					<view class="flex">-->
<!--						<image v-if="user.wx_headimg" class="w-80 h-80" :src="user.wx_headimg" />-->
<!--						<image v-else class="w-80 h-80" src="@/static/images/user/ic_wechat_payment@2x.png" />-->
<!--						<text class="font-32 color-d m-l-32">{{user.wx_nickname || '微信账号'}}</text>-->
<!--					</view>-->
<!--					<view>-->
<!--						<u-icon name="checkmark-circle-fill" size="45rpx" color="#FB2D19"></u-icon>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->

		<view class="p-l-30 p-r-30 m-t-20">
			<view class="back-color-c radius-32 p-t-40 p-l-18 p-r-18 p-b-20">
				<view class="font-28 color-a m-l-16">提现金额</view>
				<view class="flex color-d">
<!--					<text class="font-56">¥</text>-->
					<input v-model.number="number" type="number" class="m-l-20 h-198 font-65 color-b" />
				</view>
				<view class="border-bottom-e1"></view>
				<view class="font-24 color-a flex-between p-l-16 p-r-14 p-t-24">
					<text>可提现余额 ¥ {{user.balance_money}}</text>
					<text class="color-b" @click="number = user.balance_money">全部提现</text>
				</view>
			</view>
		</view>

    <view class="select m-l-30 m-t-40" @click="show = true">
      <view class="font-28">到账银行卡</view>
      <view class="flex-between h-156">
        <view class="font-32 font-weight-600">{{ !bank_id ? '选择银行卡' :  realname}}</view>
        <view>
          <image class="w-32 h-32" src="@/static/images/ic_chakangengduo@2x.png"/>
        </view>
      </view>
    </view>

		<view class="btns">
			<view class="btn" @click="applyMoneyWithdraw">提现</view>
		</view>

    <u-popup :show="show" round="32rpx">
      <view>
        <view class="h-116 flex-between p-l-30 p-r-30">
          <view style="color:#808080;" class="font-28" @click="show = false;bank_id=''">取消</view>
          <view class="flex-center font-32 font-weight-600">选择到账银行卡</view>
          <view style="color:#FB2D19;" class="font-28" @click="show = false">确定</view>
        </view>
        <scroll-view scroll-y="" style="max-height: 700rpx">
          <view class="p-l-30 p-r-30">
            <view class="flex-between h-172 border-bottom" v-for="(item,i) in lists" :key="i" @click="bank_id = item.id">
              <view>
                <view class="font-32">{{ item.realname }}({{ bank_account(item.bank_account) }})</view>
                <view style="color:#808080;" class="font-24 m-t-14">借记卡</view>
              </view>
              <image v-if="bank_id == item.id" class="w-52 h-52" src="@/static/images/ic_xzyhk@2x.png"/>
            </view>
            <view class="flex-between h-172 border-bottom" @click="jump('/views/user/bankCard/add'),show = false">
              <view>
                <view style="color:#808080;" class="font-32 m-t-14">添加银行卡</view>
              </view>
              <image class="w-32 h-32" src="@/static/images/ic_chakangengduo@2x.png"/>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <u-popup :show="show_ht" round="32rpx" mode="center">
      <view class="w-580 h-464 p-t-30 relative" style="box-sizing: border-box">
        <view class="font-36rpx flex-center font-weight-500" style="color:#333333;">签署合同</view>
        <image @click="show_ht = false" class="w-24 h-24 close" src="@/static/images/ic_guanbi@2x.png"/>
        <view class="flex-center m-t-80">
           <view class="font-28">
             <view class="flex-center" style="color:#333333;">提现需签署运营合同</view>
             <view class="flex-center" style="color:#333333;">点击确认前往e签宝签署</view>
           </view>
        </view>
        <view class="flex-center m-t-80">
          <view class="qsqr flex-center">确认</view>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	export default {
		name: 'withdrawal',
		data() {
			return {
				number: 0.00,
				balance: {},
        show:false,
        show_ht:false,
        lists:[],
        bank_id:''

			}
		},
    computed:{
      realname(){
        let item = this.lists.find(item => item.id == this.bank_id)
        return `${item.realname}(${this.bank_account(item.bank_account)})`
      }
    },
		onLoad() {
			this.getMemberAccountInfo()
      this.getLists()
		},
		methods: {
			// 用户财务-用户账户信息
			async getMemberAccountInfo() {
				const res = await this.$api.common.user('getMemberAccountInfo', {
					account_type: 'balance'
				})
				if (res.code === 200) {
					this.c = res.data
				}
			},
			jumpPage(url) {
				uni.$u.route(url)
			},
      getLists(){
        this.$api.common.user('getUserBankCardList').then(res => {
          if (res.code === 200) {
            this.lists = res.data
          }
        })
      },
			async applyMoneyWithdraw() {
				if (this.number <= 0) {
					return
				}
        if(!this.bank_id) return
				let params = {
					apply_money: this.number,
					transfer_type: 'bank',
          bank_account_id: this.bank_id,
          jump_url: window.location.href,
          is_qs: 1,
          app_type:'wechat'
				}
				const res = await this.$api.common.user('applyMoneyWithdraw', params)
				if (res.code === 200) {
					this.replaceJump('/pages/user/withdrawal-state')
				}
			},
      bank_account(bank_account){
        // 返回后4位
        return bank_account.substr(bank_account.length - 4, 4)
      }
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		width: 100%;
		position: fixed;
		bottom: 68rpx;
		left: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		z-index: 1;

		.btn {
			height: 88rpx;
			background-color: $b;
			text-align: center;
			line-height: 88rpx;
			border-radius: 49rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

  .select{
    width: 690rpx;
    height: 224rpx;
    background: #FFFFFF;
    border-radius: 32rpx;
    padding-left: 30rpx;
    padding-top: 28rpx;
    padding-right: 30rpx;
    box-sizing: border-box;
  }

  .close{
    position: absolute;
    top: 44rpx;
    right: 30rpx;
  }

  .qsqr{
    width: 484rpx;
    height: 96rpx;
    background: #FB2D19;
    border-radius: 16rpx;
    color: #FFFFFF;
    font-size: 32rpx;
  }
</style>
